<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Fresns" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="generator" content="Bootstrap 5">
    <title>列表模块介绍</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/css/bootstrap-icons.css">
    <link rel="stylesheet" href="../../assets/css/fresns.css">
</head>

<body>
    <!--页头-->
    <header>
        <div class="text-center mt-5"><img src="../../assets/images/fresns-icon.png" height="80"></div>
    </header>

    <div class="container-fluid mb-5">
        <div class="text-center my-5">
            <div class="text-center mt-3">
                <div class="btn-group">
                    <a href="../style/extend.html" class="btn btn-outline-primary">样式</a>
                    <a href="extend.html" class="btn btn-outline-primary active">结构</a>
                    <a href="../desc/extend.html" class="btn btn-outline-primary">说明</a>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs justify-content-center">
            <li class="nav-item"><a class="nav-link" href="../index.html">首页</a></li>
            <li class="nav-item"><a class="nav-link" href="member.html">成员列表</a></li>
            <li class="nav-item"><a class="nav-link" href="group.html">小组列表</a></li>
            <li class="nav-item"><a class="nav-link" href="hashtag.html">话题列表</a></li>
            <li class="nav-item"><a class="nav-link" href="post.html">帖子列表</a></li>
            <li class="nav-item"><a class="nav-link" href="comment.html">评论列表</a></li>
            <li class="nav-item"><a class="nav-link active" href="extend.html">扩展内容模板</a></li>
            <li class="nav-item"><a class="nav-link" href="implant.html">植入内容模板</a></li>
        </ul>
    </div>

    <div class="lists-box clearfix">
        <!--扩展内容代码结构-->
        <div class="card mb-3">
            <div class="card-header">正方形小图</div>
            <div class="card-body d-flex flex-column p-3">
                <code>&lt;div class="position-relative frame-box-info"&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="d-flex align-items-center"&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-shrink-0"&gt;</code>
                            <code style="padding-left:6rem;" class="text-secondary">封面图</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-grow-1 px-3"&gt;</code>
                            <code style="padding-left:6rem;">&lt;div class="frame-title"&gt;</code>
                                <code style="padding-left:8rem;" class="text-secondary">标题</code>
                            <code style="padding-left:6rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="position-absolute top-50 end-0 translate-middle-y content-link"&gt;</code>
                        <code style="padding-left:4rem;" class="text-secondary">按钮</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;" class="text-secondary">stretched-link 链接，根据打开方式条件决定属性</code>
                <code>&lt;/div&gt;</code>
            </div>
        </div>
        <!--分隔线-->
        <div class="card mb-3">
            <div class="card-header">正方形大图</div>
            <div class="card-body d-flex flex-column p-3">
                <code>&lt;div class="position-relative frame-box-info"&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="d-flex align-items-center"&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-shrink-0"&gt;</code>
                            <code style="padding-left:6rem;" class="text-secondary">封面图</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-grow-1 px-3"&gt;</code>
                            <code style="padding-left:6rem;">&lt;div class="d-flex flex-column frame-box-big"&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-title"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">标题</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-desc mt-auto"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">副信息 1</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-desc mt-auto"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">副信息 2</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                            <code style="padding-left:6rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="position-absolute top-50 end-0 translate-middle-y content-link"&gt;</code>
                        <code style="padding-left:4rem;" class="text-secondary">按钮</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;" class="text-secondary">stretched-link 链接，根据打开方式条件决定属性</code>
                <code>&lt;/div&gt;</code>
            </div>
        </div>
        <!--分隔线-->
        <div class="card mb-3">
            <div class="card-header">纵向图</div>
            <div class="card-body d-flex flex-column p-3">
                <code>&lt;div class="position-relative frame-box-info"&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="d-flex align-items-center"&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-shrink-0"&gt;</code>
                            <code style="padding-left:6rem;" class="text-secondary">封面图</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-grow-1 px-3"&gt;</code>
                            <code style="padding-left:6rem;">&lt;div class="d-flex flex-column frame-box-portrait"&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-title"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">标题</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-desc mt-auto"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">副信息 1</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-desc mt-auto"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">副信息 2</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                            <code style="padding-left:6rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="position-absolute top-50 end-0 translate-middle-y content-link"&gt;</code>
                        <code style="padding-left:4rem;" class="text-secondary">按钮</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;" class="text-secondary">stretched-link 链接，根据打开方式条件决定属性</code>
                <code>&lt;/div&gt;</code>
            </div>
        </div>
        <!--分隔线-->
        <div class="card mb-3">
            <div class="card-header">横向图</div>
            <div class="card-body d-flex flex-column p-3">
                <code>&lt;div class="position-relative frame-box-info"&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="d-flex align-items-center"&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-shrink-0"&gt;</code>
                            <code style="padding-left:6rem;" class="text-secondary">封面图</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;div class="flex-grow-1 px-3"&gt;</code>
                            <code style="padding-left:6rem;">&lt;div class="d-flex flex-column frame-box-landscape"&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-title"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">标题</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-desc mt-auto"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">副信息 1</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                                <code style="padding-left:8rem;">&lt;div class="frame-desc mt-auto"&gt;</code>
                                    <code style="padding-left:10rem;" class="text-secondary">副信息 2</code>
                                <code style="padding-left:8rem;">&lt;/div&gt;</code>
                            <code style="padding-left:6rem;">&lt;/div&gt;</code>
                        <code style="padding-left:4rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="position-absolute top-50 end-0 translate-middle-y content-link"&gt;</code>
                        <code style="padding-left:4rem;" class="text-secondary">按钮</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;" class="text-secondary">stretched-link 链接，根据打开方式条件决定属性</code>
                <code>&lt;/div&gt;</code>
            </div>
        </div>
        <!--分隔线-->
        <div class="card mb-3">
            <div class="card-header">文本框</div>
            <div class="card-body d-flex flex-column p-3">
                <code>&lt;div class="position-relative frame-box-text"&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="frame-text-content"&gt;</code>
                        <code style="padding-left:4rem;" class="text-secondary">文本内容</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;">&lt;div class="frame-text-file"&gt;</code>
                        <code style="padding-left:4rem;" class="text-secondary">附件</code>
                    <code style="padding-left:2rem;">&lt;/div&gt;</code>
                    <code style="padding-left:2rem;" class="text-secondary">stretched-link 链接，根据打开方式条件决定属性</code>
                <code>&lt;/div&gt;</code>
            </div>
        </div>
    </div>

    <footer class="text-center" style="margin-top:100px;">
        <div><img src="../../assets/images/fresns-logo.png" height="30"></div>
        <p class="mt-3 mb-5"><a href="https://tangjie.me" target="_blank">唐杰出品</a></p>
    </footer>

    <script src="../../assets/javascript/bootstrap.bundle.min.js"></script>
    <script src="../../assets/javascript/fresns.js"></script>
</body>

</html>